<template>
  <a-card style="margin-top:-2px" :bordered="false">
    <div class>
      <a-form>
        <!--查询条件 start-->
        <a-row class="form-row">
          <a-col :span="6" :offset="1">
            <a-form-item label="考评周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!-- <a-input style="width:210px" v-model="queryParam.kpzqid" /> -->
              <a-select
                v-model="queryParam.kpzqid"
                style="width: 100%;"
                placeholder="请选择考评周期"
                :allowClear="true"
              >
                <a-select-option
                  v-for="item in kpzqList"
                  :key="item.id"
                  :value="item.id"
                >{{ item.kpzqmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <!--查询条件 end-->
        <!--操作按钮 start -->
        <a-row :gutter="24" algin="center" style="margin-top:10px">
          <a-col :md="12">
            <span style="float:right" class="table-page-search-submitButtons">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
        <!--操作按钮 end -->
      </a-form>
      <a-spin :spinning="confirmLoading">
        <a-row type="flex" style="padding-top:3%;">
          <a-col
            :span="3"
            :offset="1"
            style="text-align:center;padding-top:1.3%;border:solid #ddd 1px;"
          >单位/项目</a-col>
          <!-- 循环横坐标 -->
          <a-col
            style="text-align:center;border:solid #ddd 1px;border-left:none;padding:0.5% 0;"
            :span="3"
            v-for="heng in hengList"
            :key="heng.id"
            v-html="hengResolve(heng.name)"
          ></a-col>
        </a-row>
        <div style="padding-bottom:3%;">
          <a-row v-for="zong in zongList" :key="zong.id" type="flex">
            <!-- 循环纵坐标 -->
            <a-col
              :span="3"
              :offset="1"
              style="text-align:center;border:solid #ddd 1px;padding:1% 0;border-top:none;"
            >{{ zong.orgName }}</a-col>
            <!-- 循环内容 -->
            <a-col
              :span="3"
              v-for="(heng,hengIndex) in hengList"
              :key="hengIndex"
              style="text-align:center;border:solid #ddd 1px;padding-top:0.9%;border-left:none;border-top:none;"
            >
              <div v-for="(content,contentIndex) in contentList" :key="contentIndex">
                <div v-if="content.id==zong.id">
                  <div v-for="(value,key,index) in content" :key="index">
                    <!-- <span>{{content['fs'+(hengIndex+1)]}}</span> -->
                    <span v-if="(index-hengIndex)==1">{{ value }}</span>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </div>
  </a-card>
</template>
<script>
// import { STable } from "@/components";
import { query } from '@/api/admin'

export default {
  components: {
    // STable
  },
  data () {
    return {
      visible: false,
      // 查询参数
      queryParam: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false, // Loading
      hengList: [],
      zongList: [],
      contentList: [],
      kpzqList: []
    }
  },
  created () {
    this.confirmLoading = true
    this.heng()
    this.zong()
    // this.content()
    this.queryKPZQ()
  },
  methods: {
    // 查询考评周期
    queryKPZQ () {
      const vm = this
      query('/par/statisticalreport/parExamPeriodInfo', 'GET').then(res => {
        vm.kpzqList = res.result
        this.confirmLoading = false
      })
    },
    // 横向标题解析
    hengResolve (str) {
      str = str.replace('考评标准及要点', '')
      const index = str.indexOf('（')
      return this.insertStr(str, index, '<br/>')
    },
    // 插入
    // 为字符串插入字符 其中soure为原字符串,start为将要插入字符的位置，newStr为要插入的字符
    insertStr (soure, start, newStr) {
      return soure.slice(0, start) + newStr + soure.slice(start)
    },
    /**
     * 搜索
     */
    search () {
      this.content()
    },
    // 横向
    heng () {
      // let actionParam = {
      //   // 请求参数
      //   url: "/par/statisticalreport/horizontal",
      //   method: "GET",
      //   parameter: {},
      //   data: this.queryParam,
      //   message: ""
      // };
      // // 调用请求
      // query(actionParam).then(res => {
      // });
      const vm = this
      query('/par/statisticalreport/horizontal', 'GET').then(res => {
        vm.hengList = res.result
        this.confirmLoading = false
      })
    },
    // 纵向
    zong () {
      // let actionParam = {
      //   // 请求参数
      //   url: "/par/statisticalreport/vertical",
      //   method: "GET",
      //   parameter: {},
      //   data: this.queryParam,
      //   message: ""
      // };
      // // 调用请求
      // query(actionParam).then(res => {
      // });
      const vm = this
      query('/par/statisticalreport/vertical', 'GET').then(res => {
        vm.zongList = res.result
        this.confirmLoading = false
      })
    },
    // 内容
    content () {
      // let actionParam = {
      //   // 请求参数
      //   url: "/par/statisticalreport/content",
      //   method: "GET",
      //   parameter: {},
      //   data: this.queryParam,
      //   message: ""
      // };
      // // 调用请求
      // query(actionParam).then(res => {
      // });
      const vm = this
      if (!vm.queryParam.kpzqid) {
        vm.$notification['warning']({
          message: '请选择一个考评周期',
          duration: 2
        })
      } else {
        vm.confirmLoading = true
        query('/par/statisticalreport/content', 'GET', vm.queryParam).then(res => {
          vm.contentList = res.result
          vm.confirmLoading = false
        })
      }
    }
  }
}
</script>
<style scoped>
.text-overflow {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
